<template>
    <div class="screen">
      <router-view/>
      <div>
        <mt-tabbar v-model="selected" :fixed="isfixed" style="height: 5rem">
          <mt-tab-item id="home">
            <img slot="icon" src="../../assets/image/homepage_fill.svg">
            主页
          </mt-tab-item>
          <mt-tab-item id="meassage">
            <img slot="icon" src="../../assets/image/message_fill.svg">
            消息
          </mt-tab-item>
          <mt-tab-item id="company">
            <img slot="icon" src="../../assets/image/company.svg">
            公司
          </mt-tab-item>
          <mt-tab-item id="me">
            <img slot="icon" src="../../assets/image/me.svg">
            我
          </mt-tab-item>
        </mt-tabbar>
      </div>
    </div>
</template>

<script>
    export default {
        name: "Main",
      data(){
          return{
            selected:'home',
            isfixed:true
          }
      },
      watch: {
        selected: function (val, oldVal) {
          if(val=="home"){
            this.$router.push({path:'/main/homePage'});
          }else if(val=="company"){
            this.$router.push({path:'/main/company'});
          }else if(val=="meassage"){
            this.$router.push({path:'/main/message'});
          }else{
            this.$router.push({path:'/main/me'});
          }
        }
      }
    }
</script>

<style scoped>

</style>
